<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*max-width:从字面意思可以看出,是规定元素本身最大宽度，元素本身宽度应小于等于最大宽度值。
    min-width:从字面意思可以看出，是规定元素本身最小宽度，元素本身宽度应大于等于最小宽度值。*/
        body>div{
            margin: 5px;
        }
        div#first{
            background-color: #0D7114;
            width: 200px;
            height: 200px;
        }
        div#one{                                /*width和max-width谁的值小，那么就显示为谁的宽度*/
            width: 200px;
            height: 200px;
            max-width: 100px;
            background-color: #FAA53B;
        }
        div#two{
            background-color: #4F1268;
            width: 200px;
            height: 200px;
            max-width: 500px;
        }
        div#three{                              /*min-width:100px, width的值依然会覆盖min-width的值*/
            background-color: #1a66b3;
            width: 200px;
            height: 200px;
            max-width: 500px;
            min-width: 100px;
        }
        div#four{                               /*min-width:300px,则min-width的值会覆盖width的值*/
            background-color: black;
            width: 200px;
            height: 200px;
            max-width: 500px;
            min-width: 300px;
        }
    </style>
</head>
<body>
<div id="first">例子</div>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
</body>
</html>